import React from 'react';
import { Table, Space, Button, Breadcrumb, Divider, Form, Input, Modal, Pagination, Select, message } from 'antd';
import { AppstoreTwoTone, PlusOutlined, FormOutlined, DeleteOutlined, LinkOutlined } from '@ant-design/icons'
import styles from './standardList.less'
import { connect, routerRedux } from 'dva';
import CreateForm from './createStandardList'

const { Option } = Select;
@connect((global) => ({
  userInfo: global.userInfo,
}))
class StandardListForm extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 0,
      pageSize: 5,
      total: 0,
      form: {
        writeUnit: "",
        name: "",
      },
      selectUnitList: ["zhang", "li"],
      selectPeopleList: ["Tom", "Lucky"],
      isModalVisible: false,
      modalTitle: "",
      data: [],//表数据
      standardDetail: { endTime: "" },//详情数据
    }
  }
  componentDidMount() {
    this.getStandardList()
  }
  searchStandardList=()=>{
    this.setState({
      currentPage:1
    },()=>{
      this.getStandardList()
    })
  }
  //查询
  getStandardList = () => {
    console.log(this.props)
    const { dispatch } = this.props
    const { form, currentPage, pageSize } = this.state
    dispatch({
      type: "global/getStandardList",
      payload: {
        pageSize: pageSize,
        currentPage: currentPage === 0 ? 1 : currentPage,
        name: form.name,
        writeUnit: form.writeUnit,
      }
    }).then(res => {
      console.log(res)
      if (res) {
        res.data.rows.map((item, index) => {
          item.key = item.id
        })
        this.setState({
          data: res.data.rows,
          total: res.data.total
        })
      }
    })
  }
  //删除
  handleDelete = (record) => {
    this.props.dispatch({
      type: "global/deleteStandard",
      payload: {
        id: record.id
      }
    }).then(res => {
      console.log(res)
      if (res) {
        message.success("删除成功！")
        this.getStandardList()
      }
    })
  }
  //编辑
  handleEdite = (record) => {
    this.props.dispatch({
      type: "global/getStandardInfo",
      payload: {
        id: record.id
      }
    }).then(res => {
      console.log(res)
      if (res) {
        this.setState({
          standardDetail: res.data,
          modalTitle: "标准编辑",
          isModalVisible: true,
        })
      }
    })
  }
  //清空
  clearEvent = () => {
    this.setState({
      form: {
        writeUnit: "",
        author: "",
        name: ""
      }
    }, () => { this.getStandardList() })
  }
  //新增
  createEvent = () => {
    this.setState({
      standardDetail: {},
      isModalVisible: true,
    })
    // this.props.dispatch(routerRedux.push({ pathname: '/assetstandard/createStandardList' }))
  }
  //操作栏跳转
  toStandardMetaData = (record) => {
    this.props.dispatch(routerRedux.push({ pathname: '/assetstandard/standardMetaData', standardId: record.id }))
  }
  toStandardData = (record) => {
    this.props.dispatch(routerRedux.push({ pathname: '/assetstandard/standardData', standardId: record.id }))
  }

  handleOk = () => {
    this.setState({
      isModalVisible: false
    })

  }
  handleCancel = () => {
    this.setState({
      isModalVisible: false
    })
  }

  //标准名称
  inputValueChange = (e) => {
    this.setState({
      form: {
        ...this.state.form,
        name: e.target.value
      },
      currentPage: 0
    })
  }

  //单位选择
  handleUnitChange = (e) => {
    this.setState({
      form: {
        ...this.state.form,
        writeUnit: e.target.value
      },
      currentPage: 0
    })
  }

  //分页
  pageChange = (page, pageSize) => {
    console.log(page, pageSize)
    this.setState({ pageSize: pageSize, currentPage: page }, () => { this.getStandardList() })
  }
  //
  pageSizeChange = (current, size) => {
    // console.log(size)
    this.setState({ pageSize: size, currentPage: 1 }, () => { this.getStandardList() })
  }
  render() {
    let { form, isModalVisible, modalTitle, data, standardDetail,currentPage } = this.state;

    //表头数据
    const columns = [
      {
        title: '标准编号',
        dataIndex: 'num',
        align: "center",
        key: 'num',
        // width:200
      },
      {
        title: '标准名称',
        dataIndex: 'tile',
        align: "center",
        key: 'tile',
        // width:200
      },
      {
        title: '起草单位',
        dataIndex: 'writeUnit',
        align: "center",
        key: 'writeUnit',
        // width:200
      },
      {
        title: '名称访问量',
        dataIndex: 'visitNum',
        align: "center",
        key: 'visitNum',
      },

      {
        title: '发布时间',
        key: 'releaseTime',
        align: "center",
        dataIndex: 'releaseTime',
        // width:300
      },
      {
        title: '实施时间',
        key: 'effectDate',
        align: "center",
        dataIndex: 'effectDate',
      },
      {
        title: '操作',
        key: 'action',
        align: "center",
        width: 100,
        render: (text, record, index) => (
          <Space size="small">
            <Button type="link"
              icon={<FormOutlined />}
              size="small"
              onClick={() => this.handleEdite(record)}>编辑</Button>
            <Button type="link"
              icon={<DeleteOutlined />}
              danger
              size="small"
              onClick={() => this.handleDelete(record)}>删除</Button>
            <Button type="link"
              icon={<LinkOutlined />}
              size="small"
              onClick={() => this.toStandardMetaData(record)}>标准元数据</Button>
            <Button type="link"
              icon={<LinkOutlined />}
              size="small"
              onClick={() => this.toStandardData(record)}>标准数据</Button>
          </Space>
        ),
      },
    ];

    return (
      <div>
        <div className={styles.pagetop}>
          <span className={styles.pageheader}>
            <Breadcrumb>
              <Breadcrumb.Item><AppstoreTwoTone />标准与规范</Breadcrumb.Item>
              <Breadcrumb.Item>
                <a href="/assetstandard/standardList">标准列表</a>
              </Breadcrumb.Item>
            </Breadcrumb>
          </span>
        </div>
        <div style={{ background: "white" }}>
          <div className={styles.form}>
            <Form
              layout="inline"
              initialValues={form}
            >
              <Form.Item
                label="标准名称"
              >
                <Input placeholder="请输入标准名称" value={form.name} onChange={this.inputValueChange} />
              </Form.Item>
              <Form.Item
                label="起草单位"
              >
                <Input placeholder="请输入起草单位" value={form.writeUnit} onChange={this.handleUnitChange} />
              </Form.Item>
              <Form.Item>
                <Button type="primary" onClick={this.searchStandardList}>查询</Button>
                <Button type="default" style={{ marginLeft: "10px" }} onClick={this.clearEvent}>清空</Button>
              </Form.Item>
            </Form>
          </div>
          <Divider />
          <Button type="primary" icon={<PlusOutlined />} style={{ marginLeft: "20px" }} onClick={this.createEvent}>新增</Button>
          <Table
            columns={columns}
            dataSource={data}
            pagination={false}
            table-layout="fixed"
            style={{ overflow: "hidden" }}
          />
        </div>
        <div className={styles.pagination}>
          <Pagination
            total={this.state.total}
            showSizeChanger
            showQuickJumper
            current={currentPage === 0 ? 1 : currentPage}
            defaultCurrent={1}
            defaultPageSize={5}
            pageSizeOptions={[5, 10, 20, 50]}
            showTotal={total => `共 ${total} 条`}
            onChange={this.pageChange}
            onShowSizeChange={this.pageSizeChange}
          />
        </div>
        <Modal
          title={modalTitle}
          centered
          // closable={ false }
          onCancel={this.handleCancel}
          okText="保存"
          width={1300}
          visible={isModalVisible}
          footer={false}

        >
          <CreateForm
            key={new Date()}
            modalTitle={modalTitle}
            handleCancel={this.handleCancel}
            handleOk={this.handleOk}
            standardDetail={standardDetail}
            getStandardList={this.getStandardList} />
        </Modal>
      </div>
    );
  }
}

export default StandardListForm;